<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getOperationsApi, confirmOperationApi, tzOperationApi } from '@/api/operation/operations'
import OperationDialog from '@/views/warehouseoperations/OperationDialog.vue'

// 定义数据
const tableData = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

const jobCode = ref('')

// 作业类型映射
const categoryMap = {
  1: '组合加工',
  2: '拆分加工'
}

// 状态映射
const statusMap = {
  1: '否',
  2: '是',
  3: '是'
}

// 获取数据
const fetchData = async () => {
  const res = await getOperationsApi(jobCode.value, currentPage.value, pageSize.value)
  tableData.value = res.rows
  total.value = res.total
}

// 刷新数据
const refreshData = () => {
  currentPage.value = 1
  fetchData()
}

// 搜索数据
const searchData = () => {
  currentPage.value = 1
  fetchData()
}

// 处理分页大小变化
const handleSizeChange = (val) => {
  pageSize.value = val
  fetchData()
}

// 处理当前页变化
const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchData()
}

// 打开拆分加工弹窗
const openSplitOperationDialog = () => {
  operationDialogRef.value.open(2) // 2: 拆分加工
}

// 打开组合加工弹窗
const openCombineOperationDialog = () => {
  operationDialogRef.value.open(1) // 1: 组合加工
}

// 查看作业详情
const viewOperation = (row) => {
  operationDialogRef.value.open(row.category, row.jobCode)
}
// 确认弹窗相关
const confirmDialogVisible = ref(false)
const currentRowForConfirm = ref(null)

// 打开确认弹窗
const openConfirmDialog = (row) => {
  currentRowForConfirm.value = row
  confirmDialogVisible.value = true
}

// 关闭确认弹窗
const closeConfirmDialog = () => {
  confirmDialogVisible.value = false
  currentRowForConfirm.value = null
}

// 确认操作
const confirmOperation = async () => {
  try {
    if (!currentRowForConfirm.value) return

    // 调用确认接口
    const res = await confirmOperationApi(currentRowForConfirm.value.id)

    if (res.code) {
      ElMessage.success('确认成功')
      // 刷新数据
      refreshData()
    } else {
      ElMessage.error('确认失败: ' + res.message)
    }
  } catch (error) {
    console.error('确认操作失败:', error)
    ElMessage.error('确认失败: ' + (error.message || error.toString() || '未知错误'))
  } finally {
    closeConfirmDialog()
  }
}

// 调整弹窗相关
const adjustDialogVisible = ref(false)
const currentRowForAdjust = ref(null)

// 打开调整弹窗
const openAdjustDialog = (row) => {
  currentRowForAdjust.value = row
  adjustDialogVisible.value = true
}

// 关闭调整弹窗
const closeAdjustDialog = () => {
  adjustDialogVisible.value = false
  currentRowForAdjust.value = null
}

// 调整操作
const adjustOperation = async () => {
  try {
    if (!currentRowForAdjust.value) return

    // 调用确认接口
    const res = await tzOperationApi(currentRowForAdjust.value.id)

    if (res.code) {
      ElMessage.success('确认成功')
      // 刷新数据
      refreshData()
    } else {
      ElMessage.error('确认失败: ' + res.message)
    }
  } catch (error) {
    console.error('确认操作失败:', error)
    ElMessage.error('确认失败: ' + (error.message || error.toString() || '未知错误'))
  } finally {
    closeAdjustDialog()
  }
}
// 获取员工姓名
const getEmpNameById = async (empId) => {
  try {
    const res = await getEmpInfoApi(empId)
    return res.name || ''
  } catch (error) {
    return ''
  }
}

// 组件引用
const operationDialogRef = ref(null)

// 页面加载时获取数据
onMounted(() => {
  fetchData()
})
</script>

<template>
  <div class="warehouse-operations">
    <!-- 搜索和操作区域 -->
    <div class="operation-header">
      <div class="header-left">
        <el-button type="primary" @click="openSplitOperationDialog">拆分加工</el-button>
        <el-button type="primary" @click="openCombineOperationDialog">组合加工</el-button>
        <el-button @click="refreshData">刷新</el-button>
      </div>
      <div class="header-right">
        <el-input v-model="jobCode" placeholder="作业单号" style="width: 200px;" />
        <el-button type="primary" @click="searchData">搜索</el-button>
      </div>
    </div>

    <!-- 数据表格 -->
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="#" width="60" />
      <el-table-column prop="jobCode" label="作业单号" width="180" />
      <el-table-column prop="category" label="作业类型" width="120">
        <template #default="{ row }">
          {{ row.category === 1 ? '组合加工' : row.category === 2 ? '拆分加工' : '其他' }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="120">
        <template #default="{ row }">
          {{ row.status === 1 ? '未确认' : row.status === 2 ? '已确认' : '已调整' }}
        </template>
      </el-table-column>
      <el-table-column prop="empId" label="操作人" width="120" />
      <el-table-column prop="operateTime" label="操作时间" width="180" />
      <el-table-column prop="createBy" label="创建人" width="120" />
      <el-table-column prop="createTime" label="创建时间" width="180" />
      <el-table-column label="操作" width="220" fixed="right">
        <template #default="{ row }">
          <el-button size="small" @click="viewOperation(row)">查看</el-button>
          <el-button size="small" @click="openConfirmDialog(row)">确认</el-button>
          <el-button size="small" @click="openAdjustDialog(row)">调整</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total"
        layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>

    <!-- 作业详情弹窗 -->
    <OperationDialog ref="operationDialogRef" />
    <!-- 确认弹窗 -->
    <el-dialog v-model="confirmDialogVisible" title="提示">
      <div>您确认对该条数据进行加工吗？</div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeConfirmDialog">关闭</el-button>
          <el-button type="primary" @click="confirmOperation">确认</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 调整弹窗 -->
    <el-dialog v-model="adjustDialogVisible" title="提示">
      <div>您确认对该条数据进行调整吗？</div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeAdjustDialog">关闭</el-button>
          <el-button type="primary" @click="adjustOperation">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.warehouse-operations {
  padding: 20px;
}

.operation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-left {
  display: flex;
  gap: 10px;
}

.header-right {
  display: flex;
  gap: 10px;
  align-items: center;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>